<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue.js入门教程</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js" ></script>
    <!--<script type="application/javascript" src="../js/vue.js"></script>-->
    <!--style样式来源：oschina　更多评论页面-->
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <your-component></your-component>
    </div>
</body>
    <script>
//        注册
        Vue.component('my-component',{
            template:'<div>A custom component!</div>',
            data:{
                message:'Hello Vue.js'
            }
        })
//        不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用
        var Child={
            template:'<div>B custom component!</div>'
        }

//        创建根实例
        var app=new Vue({
            el:'#app',
            data:{

            },
            components:{
//                <your-component>将只在父模板中可用
                'your-component':Child
            }
        })
    </script>
</html>
